<template>
    <div class="home">
    <div class="body">
      <div class="title">垛架打印</div>
      <div class="search">
        <div class="block" style="min-width:30%">
          <span style="width:4.5rem;">垛架标识（RFID）：</span>
          <el-input v-model="txtRFID" style="width:300px" placeholder="请输入垛架标识"></el-input>
        </div>
        <el-button type="primary" style="width:200px;height:40px" @click="search()">查询</el-button>
        <el-button type="primary" style="width:200px;height:40px;background: #ff6600;border: solid 1px #ff6600;" @click="printDJ">打印</el-button>
      </div>
      
      <div class="table-w">
        <el-table
          :data="stockList"
          :row-style="tableRowStyle"
          :header-cell-style="tableHeaderColor"
          highlight-current-row
          style="width: 100%;font-size:16px;"
          @selection-change="handleSelectionChange"
          height="800px"
        >
          <el-table-column
            type="selection"
            width="55">
            </el-table-column>
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">{{scope.$index + 1}}</template>
          </el-table-column>
          <el-table-column prop="RFID" label="垛架标识(RFID)" width="260" align="center"></el-table-column>
          <el-table-column prop="CardID" label="垛架编号" width="160" align="center"></el-table-column>
          <el-table-column prop="MaterielWeightUp" label="垛架最大载重量（千克）" width="360" align="center"></el-table-column>
          <el-table-column prop="StackWeight" label="垛架重量（千克）" width="360" align="center"></el-table-column>
          <el-table-column prop="StackTypeName" label="垛架类型" width="260" align="center"></el-table-column>
          <el-table-column prop="WKH" label="长宽高（mm）" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import Mixin from '@/components/mixin' // 混入
import {GetStackList} from '@/api/tool'
export default {
  name: 'stacker',
  data () {
    return {
      txtRFID: '',
      stockList: [],
      rFID_List: []
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin],
  methods: {
      // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    search () {
      let vm = this
      let params = new FormData()
      params.append('RFID', vm.txtRFID)
      params.append('CardID', '')
      params.append('StackType', 0)
      params.append('IsOnline', -1)
      GetStackList(params).then((response) => {
        try {
          vm.stockList = response.data
        } catch (e) {
          vm.stockList = []
        }
      })
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
        // 获取所有选中项的gh(工号)属性的值
      this.rFID_List = selection.map(item => item.RFID)
    },
    printDJ () {
      let vm = this
      if (vm.rFID_List.length <= 0) {
        vm.$message('请选择垛架')
      } else {
        var tempList = []
        vm.rFID_List.forEach(element => {
          var sub = vm.stockList.filter(item => item.RFID === element)
          if (sub !== null && sub !== undefined && sub.length > 0) {
            tempList.push({
              RFID: sub[0].RFID,
              CardID: sub[0].CardID,
              MaterielWeightUp: sub[0].MaterielWeightUp,
              StackWeight: sub[0].StackWeight,
              StackTypeName: sub[0].StackTypeName,
              WKH: sub[0].WKH
            })
          }
        })
        if (vm.isAndroid()) {
          window.android.print('LK', JSON.stringify(tempList))
        } else {
          vm.$message(JSON.stringify(tempList))
        }
      }
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.search()
  },
  beforeDestroy: function () {}
}
</script>
<style lang="scss">
@import "~@/css/tool/stacker.scss";
</style>
<style lang="scss">
.el-checkbox__inner{
    width: 0.4rem;
    height: 0.4rem;
}
.el-checkbox__input.is-checked .el-checkbox__inner::after{
    width: 0.09rem;
    height: 0.3rem;
    left: 0.15rem;
}
.el-table::before {
  height: 0px;
}
</style>